<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<script src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/layui/layui.js"></script>
	<script type="text/javascript">
		/* 注册layui */
		layui.use('layer', function () {
			var layer = layui.layer;
		});

		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
			});
		});

		$(function(){
			new Vue({
				el: "#app",
				data: {
					user:{
					},
					money:"",
					note:""

				},
				methods:{
					update(){
						if (this.money==""){
							layer.alert("金额为空!", {
								offset:'100px',
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}
						this.user.money=(this.money*1+this.user.money*1);
						axios.post("http://192.168.6.125:8080/user/update",this.user).then(response=> {
							console.log(this.user);
							if (response.data.code==200) {
								layer.msg("充值成功!",{
									offset:'100px'
								});
								this.money="";
								this.note="";
								axios.get("http://192.168.6.125:8080/user/getUser",this.user).then(response=> {
									if (response.data.code==200) {
										this.user = response.data.data;
										console.log(this.user);
									}else{
										alert("错误:"+response.data.msg);
									}
								})
							}else{
								alert("错误:"+response.data.msg);
							}
						})

					}
				},
				mounted: function () {

					this.user = JSON.parse(localStorage.getItem("userz"));

					// axios.get("http://192.168.6.125:8080/user/getUser").then(response=> {
					// 	if (response.data.code==200) {
					// 		this.user = response.data.data;
					// 		console.log(this.user);
					// 	}else{
					// 		alert("错误:"+response.data.msg);
					// 	}
					// })
				}
			});
		})
	</script>
</head>
<body class="bgf5">
<div id="app">

	<div class="user-content__box clearfix bgf">
		<div class="title">账户信息-资金管理</div>
		<div class="assets-box">
			<span class="c6">账户余额：</span>
			<span class="cr">¥</span>
			<b class="fz16 cr">{{user.money}}</b>
			<ul class="nav pull-right" role="tablist">
				<li role="presentation" class="active"><a href="#add" aria-controls="add" role="tab" data-toggle="tab">充值</a></li>
			</ul>
		</div>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane fade in active" id="add">
				<form action="" class="user-setting__form" role="form">
					<div class="form-group">
						<label for="add-money">充值金额</label>
						<input id="add-money" class="assets-control" v-model="money" placeholder="输入您要充值的金额" type="text">
					</div>
					<div class="form-group">
						<label for="add-note">备注（可不填）</label>
						<textarea id="add-note" v-model="note" class="assets-control" placeholder=""></textarea>
					</div>
					<div class="user-form-group tags-box">
						<button type="button" @click="update" class="btn ">立即支付</button>
						<button type="reset" class="btn ">重置</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</body>
</html>